{% from "shuup/admin/macros/general.jinja" import content_block %}

{% from "shuup/admin/macros/multilanguage.jinja" import language_dependent_content_tabs, render_monolingual_fields %}

{% macro render_slide_form(f, form, idx, is_placeholder=False) %}
    <div class="panel panel-default panel-slide row {% if is_placeholder %}placeholder-panel{% endif%}" id="slide-panel-{{ idx }}" {% if not is_placeholder %}data-idx="{{ idx }}"{% endif %}>
        <div class="panel-heading col-12" role="tab" id="heading{{ idx }}">
            <a class="panel-title panel-carousel-image d-flex align-items-center p-3" role="button" data-toggle="collapse" href="#collapse{{ idx }}" aria-expanded="false" aria-controls="collapse{{ idx }}">
                <span class="slide-title">
                {% trans %}Slide{% endtrans %} {%  if f.instance.name %}{{ idx }} {{ f.instance.name }}{% else %}{{ idx }}{% endif %}
                </span>
                <i class="ml-auto fa fa-angle-down pull-right"></i>
            </a>
        </div>
        <div id="collapse{{ idx }}" class="panel-collapse col-12 collapse{% if  idx == "__prefix__" or f.errors %} in{% endif %}" role="tabpanel" aria-labelledby="heading{{ idx }}">
            {{ language_dependent_content_tabs(f, tab_id_prefix="slide_{}".format(idx)) }}
            {{ render_monolingual_fields(f, exclude=(["DELETE"] if is_placeholder else [])) }}
            {% if is_placeholder %}
            <div class="text-center mb-3">
                <button class="btn btn-outline-danger btn-remove-slide" type="button" target="slide-panel-{{ idx }}">{{ _("Remove Slide") }}</button>
            </div>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{% set slides_form = form["slides"] %}
{{ slides_form.management_form }}
{% if slides_form.carousel.pk %}
    {% call content_block(_("Slides"), "fa-image") %}
        <div id="slides-section-wrapper-div">
            <p class="text-muted">
                {% trans -%}
                    Only image for default language is required.
                {%- endtrans %}
                {% trans -%}
                    If external link is not set link will fallback to product link, category link or cms page link in this order.
                {%- endtrans %}
            </p>
            <div class="mt-4 mb-4">
                <a class="btn btn-primary slide-add-new-panel" href="#" data-target-id="id_slides" data-target-panels="slides-section-wrapper-div">
                <i class="fa fa-plus-circle"></i>
                {% trans %}Add new slide{% endtrans %}</a>
            </div>
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="d-none" id="placeholder-panel">
                    {{ render_slide_form(slides_form.empty_form, slides_form, "__panel_prefix__", True) }}
                </div>
                {% for f in slides_form %}
                    {{ render_slide_form(f, slides_form, loop.index, not f.instance.pk) }}
                {% endfor %}
            </div>
        </div>
    {% endcall %}
{% endif %}
